<script setup>
import dayjs from 'dayjs'
import { ref, watch } from 'vue'

import { useDict } from '@/hooks/useDict'

defineOptions({
  name: 'CarPlateDetail',
})

const props = defineProps({
  detail: {
    type: Object,
    default: () => {},
  },
  parkList: {
    type: Array,
    default: () => [],
  },
})

const { dict } = useDict([
  'car_plate_category',
  'car_plate_color',
  'car_plate_property',
])

const formRef = ref()

const dialogVisible = ref(false)

const currentDetail = ref({})

const handleClose = () => {
  dialogVisible.value = false
  currentDetail.value = {}
  formRef.value?.resetFields()
}

watch(
  () => props.detail,
  (val) => {
    currentDetail.value = val
  },
  {
    immediate: true,
  },
)

watch(
  () => dialogVisible.value,
  (val) => {
    if (!val) {
      formRef.value?.resetFields()
    }
  },
)

defineExpose({ dialogVisible })
</script>

<template>
  <el-dialog
    class="custom-dialog"
    v-model="dialogVisible"
    title="车牌详情"
    width="813px"
    @close="handleClose"
  >
    <div class="custom-detail">
      <el-form
        ref="formRef"
        :model="currentDetail"
        label-position="right"
        label-width="100"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="车牌号码：" prop="LicensePlate">
              <span>{{ currentDetail.LicensePlate }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名单属性：" prop="type">
              <span>{{
                dict['car_plate_property'].find(
                  (item) => item.value === currentDetail.type,
                )?.name || ''
              }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="群组名称：" prop="groupName">
              <span>{{ currentDetail.groupName || '未分组' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车牌类型：" prop="plateCategory">
              <span>{{
                dict['car_plate_category'].find(
                  (item) => item.value === currentDetail.plateCategory,
                )?.name || ''
              }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="车牌颜色：" prop="plateColor">
              <span>{{
                dict['car_plate_color'].find(
                  (item) => item.value === currentDetail.plateColor,
                )?.name || ''
              }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="卡号：" prop="cardNo">
              <span>{{ currentDetail.cardNo }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="有效期：" prop="cardNo">
              <span>
                {{
                  currentDetail.createTime &&
                  currentDetail.effectiveTime &&
                  dayjs(currentDetail.createTime).isValid() &&
                  dayjs(currentDetail.effectiveTime).isValid
                    ? `${dayjs(currentDetail.createTime).format('YYYY-MM-DD HH:mm:ss')} ~ ${dayjs(currentDetail.effectiveTime).format('YYYY-MM-DD HH:mm:ss')}`
                    : ''
                }}
              </span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.el-form-item {
  width: 100%;
  margin-bottom: 0;

  .image-item {
    width: 100px;
    height: 100px;
  }
}
</style>
